<script setup>
import { ref,reactive,computed,watch,watchEffect } from "vue";

import dir from "./dir.vue"
defineProps({
	data:Array,
	file:Object,
	move:Object,
	hover:Boolean,
	openFolder:Function
})
</script>


<template>
<div class="dirBox">
	<div class="dir">
		<button @click="openFolder" class="openFolder" v-show="data.length===0">打开目录</button>
		<!-- <div v-for="item in dirData.value">
			<div @click="createfile(item.dir)">{{item.name}}</div>
		</div> -->
		<dir :title="file.root?.name" :data="data"></dir>
	</div>
	<div class="dirMove" @mousedown="move.mousedown('dir')" :class="{hover:move.current==='dir'||move.current==='all'||hover}"></div>
</div>

</template>


<style scoped>

.dirBox{
	height: 100%;
	width: calc( var(--dir-width) );
	background-color: #252526;
	display: flex;
	flex-direction: row;
	position: relative;
}
.dir{
	height: 100%;
	width: var(--dir-width);
	background-color: #252526;
	color: #fff;
	overflow:hidden;
}
.dirMove{
	position: absolute;
    right: 0;
	width: var(--dir-move-width);
	height: 100%;
	display: block;
	cursor: w-resize;
	transition: background-color .3s;
}
.dirMove:hover{
	background-color: #007acc;
}
.hover{
	background-color: #007acc;
}

.openFolder{
	margin: 20px auto;
	display: block;
	background-color: #007acc;
	border-color: #004471;

}
</style>